<template>
    <div class="search-container">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
      <el-row >
              <el-col :span="24" style="display:flex;justify-content: center;height: 35px;">
                <span style="font-size: 20px; color: #000;font-weight: bold;">维修记录表</span>
              </el-col>
          </el-row>
        <el-form-item >
          <div style="display: flex; align-items: center;">
            <span style="margin-right: 10px; white-space: nowrap; font-weight: 600"  >故障描述：</span>
            <el-input v-model="dataForm.keyWords" placeholder="关键字" clearable @clear="handleClear" style=" width: 200px; margin-right: 10p"></el-input>

            <div class="container" style="display: flex; align-items: center; justify-content: flex-start; ">
              <div class="fastSearch" style="display: flex;  gap: 330px;">
          <el-form-item >
            <el-button @click="search()" icon="el-icon-search"></el-button>
            <el-button type="primary" v-if="isAuth('dss:operator:delete')" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>

         <el-form-item style="  gap: 200px;">
          <span style="margin-right: 10px; white-space: nowrap; font-weight: 600">故障统计:</span>
          <el-input  v-model="dataForm.deviceId2"  placeholder="请输入设备编号"  style="width: 150px; margin-right: 10px" clearable></el-input>
          <el-button type="primary" @click="tab()" icon="el-icon-search"></el-button>
        </el-form-item>
              </div>
            </div>
        </div>
        </el-form-item>
        


         <!-- 弹窗展示结果 -->
    <el-dialog 
      title="故障统计" 
      :visible.sync="dialogVisible" 
      width="40%"
    >
        <el-table :data="this.statisticsData" border>
        <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="50"/>
        <el-table-column prop="breakdownCode" label="故障码" width="300"></el-table-column>
        <el-table-column prop="count" label="出现次数" width="100"></el-table-column>
      </el-table>
      <p></p>
        <div id="main" style="width: 400px;height:400px;"></div>
    </el-dialog>

    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="50"/>
      <el-table-column prop="deviceId" header-align="center"  align="center" label="故障设备编号" ></el-table-column>

      <el-table-column prop="breakdownMes"  header-align="center"  align="center"  label="故障描述"></el-table-column>

    <el-table-column prop="breakdownCode" header-align="center" align="center" label="故障码"></el-table-column>
    
    <el-table-column prop="repairPlan" header-align="center" align="center" label="维修方案"></el-table-column>

    <el-table-column prop="realName" header-align="center" align="center" label="维修人员姓名"></el-table-column>

    <el-table-column prop="mobile" header-align="center" align="center" label="电话"></el-table-column>

    <!-- <el-table-column prop="createTime" header-align="center" align="center" label="创建时间"></el-table-column> -->

    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"  v-if="dataForm.isOperator!=1">
        <template slot-scope="scope" >
            <el-button type="text" size="medium"  @click="updateHandle(scope.row.deviceId,scope.row.id,scope.row.infoid)" >编辑</el-button>
            <el-button type="text" size="medium" @click="deleteHandle(scope.row.id)">删除</el-button>
          
        </template>
    </el-table-column>
    </el-table>
     <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 维修弹窗 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    </div>
    
</template>
<style>

</style>
<script>
import { method } from 'lodash';
import AddOrUpdate from './repairMange-add-or-update.vue'
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 引入 Element UI 的样式

Vue.use(ElementUI); // 使用 Element UI 组件库
export default {
  data() {
    return {
      dataForm: {
        id: '',
        keyWords: '',
        isOperator: 0,
        createTime: '',
        deviceNumber: '',
        deviceId2: '',
        codeSet: [],
        numberList:[]
      },
      dialogVisible: false,
      statisticsData: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: [],
      dataListSelections: [],
      addOrUpdateVisible: false,
    }
  },
  components: {
    AddOrUpdate,
    // echarts
  },
  activated() {
    this.getDataList()
  },
  methods: {
    tab() {
      this.handleQuery()
    },
    search() {
      if (!this.dataForm.keyWords) {
        this.$message.warning('请输入关键字');
        return;
      }
      console.log(this.dataForm.breakdownMes)
      this.pageIndex = 1
      this.getDataList()
    },
    handleClear() {
      console.log('asd')
      this.pageIndex = 1
      this.getDataList()
    },
    handleQuery() {
      
      console.log(111222333);
      console.log(this.dataForm.numberList);
      console.log(this.dataForm.codeSet);
      
      
      if (!this.dataForm.deviceId2) {
        this.$message.warning('请输入设备ID');
        return;
      }
      // this.dialogVisible = true
      this.$http({
        url: this.$http.adornUrl('/dss/operator/api'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
            'limit': this.pageSize,
            'deviceId2': this.dataForm.deviceId2,
        })
        }).then(({data})=>{
          if (data && data.code === 0) {
            this.statisticsData = data.list
            this.dataForm.codeSet = data.codeSet
            this.dataForm.numberList=data.numberList
           }
        }).then(() => {
          this.dialogVisible = true
        // })
        this.$http({
          url: this.$http.adornUrl('/dss/operator/api'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'deviceId2': this.dataForm.deviceId2,
          })
        }).then(({ data }) => {
          console.log(this.statisticsData);
          
          if (data && data.code === 0) {
            this.statisticsData = data.list
            this.dataForm.codeSet = data.codeSet
            this.dataForm.numberList=data.numberList
         console.log(111222333);
      console.log(this.dataForm.numberList);
      console.log(this.dataForm.codeSet);
          } else{
            this.$message.error('查询失败');
            this.statisticsData = []
            this.dataForm.codeSet = []
            this.dataForm.numberList=[]
      }
        })

          var myChart = echarts.init(document.getElementById('main'));
          // 绘制图表
            myChart.setOption({
              title: {
                text: ''
              },
              tooltip: {},
              legend: {
                data: ['销量']
              },
              xAxis: {
                data: this.dataForm.codeSet
              },
              yAxis: { type: 'value',
              interval: 1, // 刻度间隔为 1
              min: 0,       // 可选：设置最小值为 0
              max: 'dataMax' // 可选：最大值为数据最大值
              },
              series: [
                {
                  name: '次数',
                  type: 'bar',
                  data: this.dataForm.numberList
                }
              ]
            });
            })
      },
        // 多选
        selectionChangeHandle (val) {
            this.dataListSelections = val
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
        },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
        getDataList() {
            this.dataListLoading = true
            this.$http({
                url:this.$http.adornUrl('/dss/operator/manageList'),
                method: 'get',
                params: this.$http.adornParams({
                    'page': this.pageIndex,
                    'limit': this.pageSize,
                    'isOperator': this.dataForm.isOperator,
                    'keyWords': this.dataForm.keyWords,
                    'deviceNumber':this.dataForm.deviceNumber
                })
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.dataList = data.page.list
                    this.totalPage = data.page.totalCount
                  this.dataForm.isOperator = data.isOperator

                } else {
                    this.dataList = []
                    this.totalPage = 0
                }
                this.dataListLoading = false
            })

        },
        //更新数据
        updateHandle(deviceId,id,infoid) {
          console.log(this.dataList);
            console.log(id);
            console.log(infoid);
          this.addOrUpdateVisible = true
            this.$nextTick(() => {
            this.$refs.addOrUpdate.init(deviceId,id,infoid)

        })
      },
        //删除数据
        deleteHandle(id) {
            console.log(id)
            var ids = id ? [id] : this.dataListSelections.map(item=>{
          return item.id
            })
          this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(() => {
              this.$http({
                url: this.$http.adornUrl('/dss/operator/delete'),
                method: 'post',
                data: this.$http.adornData(ids, false)
              }).then(({ data }) => {
              if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
              })
        })
        }
    }
}
</script>